@import 'restyle';

@include restyle-define(
  table,
  (
    restyle-var(border-color): set-color(grey, light),
    restyle-var(header-color): get-color(slate1),
    restyle-var(horizontal-padding): 10px,
    restyle-var(font-size): 16px,
    restyle-var(zebra): tint(set-color(grey, light), 80%),
    border-collapse: collapse,
    border-spacing: 0,
    text-align: left,
    width: 100%,
    table-layout: fixed,
    background-color: set-color(white, base),
    '& th':
      (
        font-size: restyle-var(font-size),
        background-color: restyle-var(header-color),
        min-height: 36px,
        padding: restyle-var(horizontal-padding),
        vertical-align: middle,
        white-space: nowrap
      ),
    '& td':
      (
        restyle-var(cell-height): 52px,
        box-sizing: border-box,
        height: restyle-var(cell-height),
        padding: (5px restyle-var(horizontal-padding)),
        border-bottom: 1px solid set-color(grey, light),
        vertical-align: middle,
        word-wrap: break-word
      ),
    restyle-modifiers:
      (
        'with a border': (border: 1px solid restyle-var(border-color)),
        'with stripped rows': ('& tr:nth-child(odd)': (background-color: restyle-var(zebra))),
        'with variable width': (table-layout: auto)
      )
  )
);

.nacho-table {
  @include restyle(table);

  &--bordered {
    @include restyle(table with a border);
  }

  &--stripped {
    @include restyle(table with stripped rows);
  }

  &--dynamic {
    @include restyle(table with variable width);
  }

  /**
   * Removes the the non wrap for words in the td, or th cell in  nacho-table
   */
  .nacho-table-cell-wrapped {
    white-space: normal;
  }
}
